<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
  <title>用户发布的帖子</title>
  <meta charset="UTF-8">
  <script type="text/javascript " th:src="@{../js/jquery-1.11.1-min.js}"></script>
  <script type="text/javascript" th:src="@{../bootstrap/js/bootstrap.min.js}"></script>
  <link th:href="@{../bootstrap/css/bootstrap.min.css}" type="text/css" rel="stylesheet"/>
  <link th:href="@{../css/wangEditor.css}" rel="stylesheet">
  <!--<script th:src="@{../js/wangEditor.js}"></script>-->
  <link th:href="@{../css/wangEditor2.min.css}" rel="stylesheet">
  <script th:src="@{../js/wangEditor2.min.js}"></script>
  <link th:href="@{../css/css-1.css}">
  <script th:src="@{../js/wangEditor3.min.js}"></script>

</head>

<body style="background-color: #eeeeee">
<nav class="navbar navbar-default color" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand">BBS</a>
    </div>
    <div class="col-lg-6">
      <ul class="nav navbar-nav">
        <li ><a th:href="@{/user/main}">首页</a></li>
        <li><a>问答</a></li>
        <li><a href="../help.html">帮助中心</a></li>
        <li class="active"><a href="../mine.html">我的</a></li>
        <li>
          <form class="form-inline" style="margin-top:8px ">
            <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
          </form>
        </li>
      </ul>

    </div>

    <div class="col-lg-2 col-lg-offset-2" style="width: 20%;overflow: hidden">
      <ul class="nav navbar-nav">
        <li th:if="*{session.user.name != null}"><a th:text="'欢迎你,'+ *{session.user.name}"
                                                    style="color: red"></a></li>
        <li><a href="javascript:void(0)" class="logoutBtn">注销</a></li>
      </ul>
    </div>
  </div>

</nav>


<div class="container replace" style=" padding:20px;background-color: #ffffff;width: 80%">

  <div class="row">
    <!--<div class="col-lg-12 ">-->
    <!--  <h2><span class="glyphicon glyphicon-list" aria-hidden="true"></span> 置顶 </h2>-->
    <!--  <hr>-->
    <!--</div>-->

    <!--  置顶的topic-->
    <div id="topics-top" th:each="topicUser:${topicUserMapTop}" class="col-lg-offset-01">
      <div class="media-left">
        <a href="#">
          <img width="60px" class="media-object img-circle picset" th:src="${topicUser.value.profilePhoto}">
        </a>
      </div>
      <div class="media-body col-lg-offset-00">
        <div style="color:#C9CDD4; margin-bottom: 10px">
          <span>[[${topicUser.value.name}]]</span>
          <span style="margin: 5px;display: inline-block;color: #e2b46e;background-color:#f8e7c4;">白金会员</span>
          <span>发表时间： [[${topicUser.key.createTime}]]</span>
          <span style="margin-left: 20px; " class="glyphicon glyphicon-eye-open align-middle">
                        </span><span class="align-middle"
                                     style="vertical-align: auto">[[${topicUser.key.browseCount}]]</span>
          <span style="margin-left: 20px;"
                class="glyphicon glyphicon-comment">[[${topicUser.key.commentCount}]]</span>
          <span class=" glyphicon glyphicon-thumbs-up"
                style="margin-left: 20px;">[[${topicUser.key.thumbsCount}]]</span>
        </div>
        <div>
                        <span style="margin-top: 10px;">
                            <h4 class="media-heading" style="font-size: 20px;">
                                <a th:href="@{'/article/getTopicById?id='+${topicUser.key.id}}">[[${topicUser.key.title}]]</a>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span th:if="${topicUser.key.status == '10'||topicUser.key.status == '11'}"
                                          class="top">置顶</span>
                                <span th:if="${topicUser.key.status == '01'||topicUser.key.status == '11'}"
                                      class="essence">精华</span>
                            </h4>
                        </span>
        </div>
        <div class="topic-content" th:utext="${topicUser.key.content}"
             style="padding:5px;margin: 0px 50px 0 0;font-size: 15px;line-height: 28px;font-weight: normal;text-decoration: none;color: #86909C;">

        </div>
      </div>
      <hr>
    </div>

    <div class="col-lg-12">
      <h2><span class="glyphicon glyphicon-list" aria-hidden="true"></span> 你收藏的帖子 </h2>
      <hr>
    </div>
    <!-- 未置顶的topic -->
    <div id="topics" th:each="topicUser:${topicsAndUser}" class="col-lg-offset-01">
      <div class="media-left">
        <a href="#">
          <img width="60px" class="media-object img-circle picset" th:src="${topicUser.value.profilePhoto}">
        </a>
      </div>
      <div class="media-body col-lg-offset-00">
        <div style="color:#C9CDD4; margin-bottom: 10px">
          <span>[[${topicUser.value.name}]]</span>
          <span style="margin: 5px;display: inline-block;color: #e2b46e;background-color:#f8e7c4;">白金会员</span>
          <span>发表时间： [[${topicUser.key.createTime}]]</span>
          <span style="margin-left: 20px; " class="glyphicon glyphicon-eye-open align-middle">
                        </span><span class="align-middle"
                                     style="vertical-align: auto">[[${topicUser.key.browseCount}]]</span>
          <span style="margin-left: 20px;"
                class="glyphicon glyphicon-comment">[[${topicUser.key.commentCount}]]</span>
          <span class=" glyphicon glyphicon-thumbs-up"
                style="margin-left: 20px;">[[${topicUser.key.thumbsCount}]]</span>
          <span class=" glyphicon  glyphicon-star"
                style="margin-left: 20px;">[[${topicUser.key.collectionCount}]]</span>
        </div>
        <div>
                        <span style="margin-top: 10px;">
                            <h4 class="media-heading" style="font-size: 20px;">
                                <a style="color: black" th:href="@{'/article/getTopicById?id='+${topicUser.key.id}}">[[${topicUser.key.title}]]</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                     <span th:if="${topicUser.key.status == '10'||topicUser.key.status == '11'}"
                                           class="top">置顶</span>
                                  <span th:if="${topicUser.key.status == '01'||topicUser.key.status == '11'}"
                                        class="essence">精华</span>
                            </h4>
                        </span>
        </div>
        <div class="topic-content" th:utext="${topicUser.key.content}"
             style="max-height:100px;overflow:hidden;padding:5px;margin: 0px 50px 0 0;font-size: 15px;line-height: 28px;font-weight: normal;text-decoration: none;color: #86909C;">
        </div>
      </div>
      <hr>
    </div>
  </div>
  <div>
    <div style="float: right;margin-right: 50px;line-height: 36px;font-size: 14px;" class="pg">
      <span class="count">共[[${pageInfo.total}]]条</span>
      <a th:if="${pageInfo.hasPreviousPage}" class="page-next"
         th:href="@{../user/myCollectionTopic(pageNum=${pageInfo.pageNum}-1,pageSize=${pageInfo.pageSize})}">上一页</a>
      <label class="lable-page">
        <span title="">每页显示</span>
        <!--<input onkeydown="if(event.keyCode==13) {(this.value);}" class="input-page page-num">-->

        <input class="input-page page-size"
               title="输入每页显示记录数，按回车跳转" th:value="${pageInfo.pageSize}">
        <span title="">条</span>
      </label>

      <label class="lable-page">
        <!--todo:按下回车跳转-->
        <input class="input-page page-num"
               title="输入页码，按回车跳转" th:value="${pageInfo.pageNum}" size="2">
        <span th:text="|/共${pageInfo.pages}页|"></span>
      </label>
      <a th:if="${pageInfo.hasNextPage}" class="page-next"
         th:href="@{../user/myCollectionTopic(pageNum=${pageInfo.pageNum+1},pageSize=${pageInfo.pageSize})}">下一页</a>

    </div>
  </div>
</div>

</div>

<div class="container content color" style="width: 80%;background-color: #ffffff;margin-top: 10px">
  <form role="form" style="margin-top: 20px;">
    <div class="col-lg-5 form-group" style="height: 20px">
      <input type="text" class="form-control" placeholder="标题" id="topicTitle">
    </div>
    <div class="col-lg-12 form-group" style="margin-top: 10px">
      <div id="editor"></div>
    </div>
    <div class="form-group col-lg-12">
      <div class="col-lg-offset-11 col-lg-1">
        <button type="submit" id="releaseBtn" class="btn btn-default btn-primary">发布</button>
      </div>
    </div>
  </form>
</div>
<div class="modal-footer" style="margin-top: 10px">
  <div align="center"><a>Powered by 斌斌家豪涛顺 &nbsp;&nbsp;联系我们</a></div>
</div>
</body>


<script type="text/javascript" th:inline="javascript">
  $(function () {
    $("button").click(function (ev) {
      ev.preventDefault();
    })
    $("#releaseBtn").click(function () {
      releaseTopic();
    })
    $(".logoutBtn").click(function () {
      logout();
    })
    // created()
  })

  $(document).keydown(function (event) {
    if (event.keyCode == 13) {
      window.location.href = "../user/myCollectionTopic?pageNum=" + $(".page-num").val() + "&pageSize=" + $(".page-size").val();
    }
  })

  function logout() {
    $.ajax({
      url: "logout",
      type: "get",
      dataType: "json",
      success: function (data) {
        if (data.success) {
          window.location.href = "login.html"
        } else {
          $.alert("注销失败")
        }
      }
    })
  }

  // function pageList(pageNum) {
  //     let pageSize = $.trim($(".page-size").val());
  //     console.log('pagesize:'+pageSize);
  //     $.ajax({
  //         url: "../user/main",
  //         type: "post",
  //         data: {
  //             "pageNum": parseInt(pageNum),
  //             "pageSize": parseInt(pageSize),
  //         },
  //         dataType: "html",
  //         success: function (data) {
  //             console.log('success');
  //             console.log(data);
  //             window.location.href = "main"
  //
  //
  //         },
  //         error:function(XMLHttpRequest, textStatus, errorThrown){
  //             debugger
  //             // 状态码
  //             console.log(XMLHttpRequest.status);
  //             // 状态
  //             console.log(XMLHttpRequest.readyState);
  //             // 错误信息
  //             console.log(textStatus);
  //         },
  //     })
  // }

  function created() {
    if (window.name == "") {
      $.ajax({
        url: "../article/pageList",
        type: "post",
        data: {
          "pageNum": [[${pageNum}]],
          "pageSize": [[${pageSize}]],
        }
      })
      window.name = "isReload"; // 在首次进入页面时给window.name设置一个固定值
      location.reload();
    } else if (window.name == "isReload") {
      console.log('页面被刷新')
    }
  }


</script>
<style>
  * {
    word-wrap: break-word;
    margin: 0;
    padding: 0;
  }

  label {
    cursor: default;
  }

  .pg a {
    border-radius: 3px;
    background-color: #F2F3F5;
    padding: 0px 12px;
    display: inline;
    background-repeat: no-repeat;
    float: left;
    height: 34px;
    color: black;
    margin-left: 4px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
  }

  .input-page {
    width: 30px;
    margin-bottom: 3px;
    *margin-bottom: 0px;
    border: #F2F3F5 1px solid;
    position: relative;
    top: -1px;
    text-align: center;
    color: #4E5969;
    height: 20px;
    padding: 4px 3px;
    font-size: 14px;
  }

  .page-next {
    border-radius: 3px;
    padding-bottom: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
  }

  .count {
    border-radius: 3px;
    padding-bottom: 0px;
    background-color: #F2F3F5;
    padding-left: 12px;
    padding-right: 12px;
    display: inline;
    background-repeat: no-repeat;
    float: left;
    height: 34px;
    color: #4E5969;
    margin-left: 4px;
    overflow: hidden;
    text-decoration: none;
    padding-top: 0px;
  }

  .lable-page {
    border-radius: 3px;
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: #F2F3F5;
    padding-left: 12px;
    padding-right: 12px;
    display: inline;
    background-repeat: no-repeat;
    float: left;
    height: 34px;
    color: #4E5969;
    margin-left: 4px;
    overflow: hidden;
    text-decoration: none;
  }

  .essence {
    display: inline-block;
    vertical-align: middle;
    padding: 3px 4px;
    margin-right: 1px;
    font-size: 10px;
    line-height: 15px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: #fff;
    background-color: #F76560;
    position: relative;
    top: -1px;
  }

  .top {
    display: inline-block;
    vertical-align: middle;
    padding: 3px 4px;
    margin-right: 1px;
    font-size: 10px;
    line-height: 15px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: #fff;
    background-color: #57A9FB;
    position: relative;
    top: -1px;
    max-height: 100px;
    margin-left: -20px;

  }

  .topic-content img {
    max-width: 100px !important;
  }

</style>
<!-- 引入 css -->
<script type="text/javascript" th:inline="javascript">
  var E = window.wangEditor
  var editor = new E('#editor')
  editor.create()
  this.editor.customConfig.menus = [
    'head',  // 标题
    'bold',  // 粗体
    'fontSize',  // 字号
    'fontName',  // 字体
    'italic',  // 斜体
    'underline',  // 下划线
    'strikeThrough',  // 删除线
    'foreColor',  // 文字颜色
    'backColor',  // 背景颜色
    'link',  // 插入链接
    'list',  // 列表
    'justify',  // 对齐方式
    'quote',  // 引用
    'emoticon',  // 表情
    'image',  // 插入图片
    'table',  // 表格
    'video',  // 插入视频
    'code',  // 插入代码
    'undo',  // 撤销
    'redo'  // 重复
  ]


  //配置多种语言--就是将编辑器原本文字配置成你需要的文字、
  //***链接文字一定要在链接的上面

  function releaseTopic() {
    var topicTitle = $.trim($("#topicTitle").val());
    var topicContent = editor.txt.html();
    if (topicTitle == "") {
      alert("请输入标题");
      return false;
    }
    if (topicContent == "") {
      alert("请输入内容");
      return false;
    }

    $.ajax({
      url: "/article/releaseTopic",
      data: {
        "topicTitle": topicTitle,
        "topicContent": topicContent
      },
      type: "post",
      dataType: "json",
      success: function (data) {
        alert(data)
        if (data.success) {
          window.location.href = "/user/main"
        } else {
          alert("发表失败")
        }
      }
    })
  }

</script>
</html>